<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
          name="viewport"/>
    <link rel="stylesheet" href="css/amazeui.min.css">
</head>
<body style="background-color: white;">
<style>
    /* 登陆logo */
    .myapp-login {
        background-size: 100% 100%;
        background-position: 0px 0px;
        width: 100%;
        height: 100%;
    }

    .myapp-login .myapp-login-bg {
        padding-top: 50px;
        height: 100%;
    }

    .myapp-login .myapp-login-logo {
        width: 100%;
        text-align: center;
    }

    .myapp-login .myapp-login-logo .myapp-header i {
        font-size: 120px;
        color: #FFFFFF;
    }

    .myapp-login .myapp-login-logo .myapp-history i {
        font-size: 20px;
        color: #FFFFFF;
        float: left;
        margin-left: 10%;
    }

    .myapp-login .myapp-login-logo i {
        font-size: 30px;
        color: #f0f0f0;
    }

    .myapp-login .myapp-login-form {
        margin: -1% auto;
        float: none;
        padding-top: 20px;
    }

    .myapp-login .myapp-login-form .am-form .am-form-group input {
        font-size: 14px;
        padding: 10px 0;
        background: none;
        text-indent: 1em;
        border: none;
        border-bottom: 1px solid #FF6600;
        box-shadow: none;
        color: #000;
    }

    .myapp-login .myapp-login-form .am-form button {
        background: rgba(255, 255, 255, 0.6);
        width: 100%;
        border-radius: 30px;
        color: #2a90df;
        border: none;
        font-size: 14px;
        margin-top: 20px;
    }

    .myapp-login .myapp-login-form .am-form .login-text {
        font-size: 8px;
        width: 100%;
        color: #fff;
        padding-top: 5px;
        text-align: right;
    }

    input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: white;
        /* placeholder字体大小  */
        font-size: 12px;
    }
</style>

<header data-am-widget="header"
        class="am-header am-header-default" style="background-color: #FF856E;">

    <div class="am-header-left am-header-nav">
        <a href="javascript:history.go(-1);">
            <i class="am-icon-chevron-left" style="font-size: 22px;"></i>
        </a>
    </div>
    <p class="am-header-title">登录</p>
</header>


<div class="am-g myapp-login">
    <div class="myapp-login-bg">
        <div class="myapp-login-logo">
            <div class="myapp-header">
                <img src="img/logo.png" alt="" width="80">
            </div>

        </div>

        <div class="am-u-sm-10 myapp-login-form">
            <form class="am-form" id="form-with-tooltip">
                <fieldset>

                    <div class="am-form-group">
                        <div class="am-u-sm-12  am-form-icon"  style="padding-left: 0;margin-top: 10%;">
                            <i class="am-icon-user" style="font-size: 24px;color: #ACACAC;"></i>
                            <input type="text" class="am-form-field" id="username" minlength="4"
                                   placeholder="username" required="required" style="text-indent: 1.5em;"/>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <div class="am-u-sm-12  am-form-icon"  style="padding-left: 0;margin-top: 10%;margin-bottom: 8%;">
                            <i class="am-icon-lock" style="font-size: 28px;color: #ACACAC;"></i>
                            <input type="password" class="am-form-field" id="password" style="text-indent: 1.5em;"  minlength="6" maxlength="16"
                                   placeholder="*******" required="required" data-foolish-msg="把密码交出来！"/>
                        </div>
                    </div>
                    <p>
                        <button type="button" id="submit" class="am-btn am-btn-default" style="background: #FF6600;color: white;outline: none;">Login</button>
                    </p>
                    <div class="login-text">
                        <a style="color: #ACACAC;float: left;text-indent: 1em;"
                           href="forget_pwd.html"><u>Forgot Password?</u></a>
                        <a href="register.html" style="color: #ACACAC;margin-right: 5%;"><u>Join us</u></a>
                    </div>
                </fieldset>
            </form>
        </div>

        <div class="am-modal am-modal-alert am-open"  id="model-logon">
            <div class="am-modal-dialog">
                <div class="am-modal-bd" id="login-msg">

                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn">确定</span>
                </div>
            </div>
        </div>

        <div class="myapp-login-logo">
            <a href="<%--${root}/qq_login.do--%>"><i class="am-icon-qq am-icon-fw" style="color: #ACACAC;"></i></a>
            <a href="javascript:0;" style="margin-left: 10%;"><i class="am-icon-weixin am-icon-fw" style="color: #ACACAC;"></i></a>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<script type="text/javascript">

    document.ontouchmove = function (e) {
        e.preventDefault();
    }

    $("#submit").click(function (e) {
        const  username = $("#username").val();
        const  password = $("#password").val();
        if (username != "" && password != ""){
            login();
        }
    });

</script>
</html>